<template>
  <!--- 顶部导航 --->
  <div id="navigator">
    <div class="clearfix">
      <h4 class="fl">
        <img class="fl" src="../../public/images/logo.png" @click="tohomepage()"/>
        <span class="fl" @click="tohomepage()">XXXXX<br /><i class="mt4">V 1.0.2</i></span>
      </h4>
    </div>
  </div>
</template>

<script>
export default {
  name: 'navigator',
  data() {
    return {
      activeIndex: '1',
    }
  },
  mounted() {
  },
  methods: {
    handleSelect (data) {
      console.log(data)
      this.$router.push(data)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
#navigator {
  width: 100%;
  height: 60px;
  background-color: #05193f;
  box-shadow: 0 0 10px #000;
  overflow: hidden;

  &>div {
    width: calc(100% - 48px);
    margin: 0 auto;

    &>h4.fl {
      height: 60px;
      color: #555;
      color: #fff;
      font-weight: normal;

      &>img {
        width: 134px;
        height: 30px;
        margin: 16px 14px 0 4px;
        cursor: pointer;
      }

      &>span {
        font-size: 14px;
        padding-top: 14px;
        font-weight: bold;
        cursor: pointer;

        i {
          font-size: 12px;
          line-height: 13px;
          color: #f5f5f5;
          display: inline-block;
        }
      }
    }
  }
}
</style>
